<template>
  <el-container>

    <el-aside width="250px" class="bg-while">
      <el-input v-model="filterText" placeholder="输入名称搜索" clearable />
      <el-tree
        ref="tag"
        :expand-on-click-node="false"
        :data="tree"
        :filter-node-method="filterNode"
        :check-strictly="true"
        show-checkbox
        node-key="orgId"
        :default-expanded-keys="[1, -10]"
        :props="defaultProps"
        @check="check"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>
            <i :class="data.iconClass+' mr5'" />{{ data.orgName }}
          </span>
        </span>
      </el-tree>
    </el-aside>
    <el-main class="p5">
      <el-tabs v-model="currTab" type="border-card" class="wh100 no-shadow tag-tab">
        <el-tab-pane class="wh100" name="tab2">
          <el-badge :value="deptCnt" slot="label" :hidden="deptCnt===0">
            <span>已选部门</span>
          </el-badge>
          <template v-for="(o,i) in checkedNode">
            <el-tag v-if="o.orgType=== 2" :key="i" class="m2" closable @close="removeTag(o,i)">{{ o.orgName }}</el-tag>
          </template>
        </el-tab-pane>
        <el-tab-pane class="wh100" name="tab3">
          <el-badge :value="roleCnt" slot="label" :hidden="roleCnt===0">
            <span>已选角色</span>
          </el-badge>
          <template v-for="(o,i) in checkedNode">
            <el-tag v-if="o.orgType=== 3" :key="i" class="m2" closable type="danger" @close="removeTag(o,i)">{{ o.orgName }}</el-tag>
          </template>
        </el-tab-pane>
        <el-tab-pane class="wh100" name="tab1">
          <el-badge :value="userCnt" slot="label" :hidden="userCnt===0">
            <span>已选用户</span>
          </el-badge>
          <template v-for="(o,i) in checkedNode">
            <el-tag v-if="o.orgType=== 1" :key="i" class="m2" closable type="warning" @close="removeTag(o,i)">{{ o.orgName }}</el-tag>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import { fullTree } from '@/api/org'
export default {
  name: 'OrgTagCon',
  props: {
    multi: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      param: {
        userName: ''
      },
      filterText: '',
      tree: [],
      loadingTree: false,
      checkedNode: [],
      currTab: 'tab2',
      defaultProps: {
        children: 'childs',
        label: 'orgName'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tag.filter(val)
    }
  },
  computed: {
    roleCnt(){
      return this.checkedNode.filter(o=>o.orgType===3).length
    },
    deptCnt(){
      return this.checkedNode.filter(o=>o.orgType===2).length
    },
    userCnt(){
      return this.checkedNode.filter(o=>o.orgType===1).length
    }
  },
  mounted() {

  },
  activated() {

  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.orgName.indexOf(value) !== -1
    },
    clear() {
      this.checkedNode = []
    },
    removeTag(o, i) {
      this.checkedNode.splice(i, 1)
      this.$refs.tag.setChecked(o, false)
    },
    getValue() {
      return this.$util.copy(this.checkedNode)
    },
    check(node, checkedNode) {
      this.currTab = 'tab' + node.orgType
      const l = checkedNode.checkedNodes
      console.log('multi', this.multi)
      if (this.multi) {
        this.checkedNode = l.filter(tab => tab.orgId > 1)
      } else {
        this.$refs.tag.setCheckedKeys([])
        this.$refs.tag.setChecked(node, true)
        this.checkedNode = [node]
      }
    },
    initTree() {
      this.loadingTree = true
      fullTree().then((res) => {
        const l = res.data
        this.tree = l.filter(tab => {
          if (tab.orgId <= 1) {
            tab.disabled = true
          }
          return true
        })
        this.loadingTree = false
      }).catch(() => {
        this.loadingTree = false
      })
    }
  }
}
</script>
<style scoped>
  .el-tabs{
    box-sizing: border-box;
  }
  .el-dialog__header{
    padding: 10px 20px 10px;
  }
  .el-tabs__content{
    padding: 5px!important;
  }
</style>
